<script setup>
import { Loader } from '@googlemaps/js-api-loader'
import { ref, watch } from 'vue'

let props = defineProps({
    MapdialogFormVisible: Boolean,
    formlist: Object
})
let emits = defineEmits(["closemap"])

let mapInstance = ref(null)

function colseclose() {
    emits("closemap")
}
async function initMap() {
    if (!props.MapdialogFormVisible) return

    const loader = new Loader({
        apiKey: import.meta.env.VITE_APP_GOOGLE_MAP_KEY,
        version: 'weekly',
        libraries: ['maps', 'marker']
    })
    try {
        const google = await loader.load()
        const { Map } = await google.maps.importLibrary('maps')
        const { AdvancedMarkerElement } = await google.maps.importLibrary('marker')
        // const position = { lat: 28.6139, lng: 77.2090 }     
        const position = { lat: -6.2088, lng: 106.8456 }
        const mapDiv = document.getElementById('map')
        if (!mapDiv) {
            return
        }
        const map = new Map(mapDiv, {
            zoom: 18,
            center: position,
            mapId: 'DEMO_MAP_ID',
        })
        new AdvancedMarkerElement({
            map: map,
            position: position,
            title: '新德里'
        })
    } catch (error) {
        console.error('地图加载失败：', error)
    }
}

watch(() => 
    props.MapdialogFormVisible,
    (newValue) => {
        if (newValue) {
            initMap()
        }
    }
)
</script>
<template>
    <div class="editclass">
        <el-dialog :model-value="MapdialogFormVisible" style="padding: 40px;" title="position" @close="colseclose">
            <div id="map"></div>
        </el-dialog>

    </div>
</template>
<style lang="scss" scoped>
#map {
    width: 100%;
    height: 600px;
}
</style>